<template>
  <div style="width: auto;height: 470px" id="echarts1">
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'echarts1',
  props: {
    counts: {
      type: Object,
      required: true
    }
  },
  watch: {
    counts: {
      handler: 'updateChart',
      immediate: true,
      deep: true
    }
  },
  data () {
    return {

      chart: null,
      option: {
        color: ['#5470C6', '#EE6666'],

        legend: {},
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '用户数量',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '历史订单数量',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ],
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        }
      }
    }
  },
  mounted () {
    this.chart = echarts.init(document.getElementById('echarts1'));
    this.updateChart();
  },
  methods: {
    updateChart() {
      if (this.chart && this.counts) {
        const now = new Date();
        const timeStr = `${now.getMonth() + 1}-${now.getDate()}`;

        // Update xAxis data
        this.option.xAxis[0].data.push(timeStr);
        if (this.option.xAxis[0].data.length > 6) {
          this.option.xAxis[0].data.shift();
        }

        // Update series data
        this.option.series[0].data.push(this.counts.users || 0);
        this.option.series[1].data.push(this.counts.bookings || 0);
        if (this.option.series[0].data.length > 6) {
          this.option.series[0].data.shift();
        }
        if (this.option.series[1].data.length > 6) {
          this.option.series[1].data.shift();
        }

        // Predict future data
        this.predictFutureData();

        // Set updated option
        this.chart.setOption(this.option);
      }
    },
    predictFutureData() {
      const futurePoints = 5; // Number of future points to predict
      let lastDate = new Date();
      let lastUserCount = this.option.series[0].data[this.option.series[0].data.length - 1];
      let lastBookingCount = this.option.series[1].data[this.option.series[1].data.length - 1];

      for (let i = 1; i <= futurePoints; i++) {
        const futureDate = new Date(lastDate);
        futureDate.setDate(lastDate.getDate() + 1); // Predict for the next day
        const futureTimeStr = `${futureDate.getMonth() + 1}-${futureDate.getDate()}`;

        // Ensure non-decreasing values
        const predictedUserCount = lastUserCount + Math.floor(Math.random() * 10) + 1; // Random increase of up to 10 users
        const predictedBookingCount = lastBookingCount + Math.floor(Math.random() * 5) + 1; // Random increase of up to 5 bookings

        lastUserCount = predictedUserCount;
        lastBookingCount = predictedBookingCount;

        this.option.xAxis[0].data.push(futureTimeStr);
        this.option.series[0].data.push(predictedUserCount);
        this.option.series[1].data.push(predictedBookingCount);

        // Ensure data length remains within limit
        if (this.option.xAxis[0].data.length > 6) {
          this.option.xAxis[0].data.shift();
        }
        if (this.option.series[0].data.length > 6) {
          this.option.series[0].data.shift();
        }
        if (this.option.series[1].data.length > 6) {
          this.option.series[1].data.shift();
        }

        lastDate = futureDate;
      }
    }
  }
}
</script>

<style scoped>
</style>
